<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作API</title>
    <!-- 浏览器加载 HTML 文档是按照从上到下的顺序，依次加载各个标签 -->
    <!-- 遇到 script 标签就执行里面的代码，此时 body 标签以及 body 里面的子标签都还没有加载 -->
    <!-- 所以获取不到 -->
    <script>
        // 1、根据 id 值获取元素对象
        // let divEle = document.getElementById("divEle");
        // console.log(divEle);
    </script>
</head>
<body>

    <div>div content1</div>
    <div>div content2</div>
    <div id="divEle">div content3</div>
    <div>div content4</div>
    <div>div content5</div>
    <div>div content6</div>

    <ul id="ulEle">
        <li>list item1</li>
        <li id="liMiddle">list item2</li>
        <li>list item3</li>
    </ul>

    <input type="text" name="userName" value="火星撞地球" />

    <img src="images/wanghaodong.jpg"/>
</body>
<!-- script 标签放在 body 标签后面，让 body 标签先加载到内存 -->
<script>
    // 1、根据 id 值获取元素对象
    let divEle = document.getElementById("divEle");
    console.log(divEle);

    console.log("---------------------")

    // 2、根据标签名获取元素对象
    let divEleArr = document.getElementsByTagName("div");
    for (let index in divEleArr) {
        console.log(divEleArr[index]);
    }

    console.log("---------------------")

    // 3、获取元素对象的子元素
    let ulEle = document.getElementById("ulEle");
    console.log(ulEle.children);
    console.log(ulEle.firstElementChild);
    console.log(ulEle.lastElementChild);

    // 4、获取元素对象的父节点
    console.log(ulEle.parentElement);

    // 5、测试获取兄弟元素节点对象
    let liMiddleEle = document.getElementById("liMiddle");
    console.log(liMiddleEle.previousElementSibling);
    console.log(liMiddleEle.nextElementSibling);

    // 6、获取元素节点对象的属性值
    let userNameArr = document.getElementsByName("userName");
    let userNameEle = userNameArr[0];

    // 读操作：属性在 HTML 标签中原本叫什么名字，那么就直接访问这个属性名即可
    // <input type="text" name="userName" value="火星撞地球" />
    console.log(userNameEle.value);

    let imgEle = document.getElementsByTagName("img")[0];
    console.log(imgEle.src);

    // 写操作：如果要修改 HTML 标签的属性值，那么就给它赋一个新的值即可
    imgEle.src = "images/aaa.jpg";
    userNameEle.value = "请明天再撞~~~";

    // 7、读写元素的文本标签体
    // <div id="divEle">div content3</div>
    // 读操作：直接访问元素对象的 innerText 属性
    console.log(divEle.innerText);

    // 写操作：直接给元素对象的 innerText 属性赋值即可
    divEle.innerText = "今天<span style='color: blue;font-size: 30px;'>太阳</span>真大~~~";

    // 附：innerText 和 innerHTML 的区别
    // innerText：不解析 HTML 代码
    // innerHTML：可以解析 HTML 代码
    divEle.innerHTML = "今天<span style='color: blue;font-size: 30px;'>太阳</span>真大~~~";
</script>
</html>